{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="sql_21" style="width: auto;height:800px;"></div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-RPqk+IZGGuMAN/gBBbPKRtfXRISl/vFqiT13cXlm2vHZtd+xZ7ugm9sDxXDb2Ylk" src="https://lib.baomitu.com/echarts/4.6.0/echarts.min.js"></script>
<script type="text/javascript" src="{% static 'Dashboard/china.js' %}"></script>
<script type="text/javascript" src="{% static 'Dashboard/guangdong.js' %}"></script>
<!--SQL_21绘图：师生分布地图-->
<script type="text/javascript">

let provinces = {
    //23个省
    "台湾": "taiwan",
    "河北": "hebei",
    "山西": "shanxi",
    "辽宁": "liaoning",
    "吉林": "jilin",
    "黑龙江": "heilongjiang",
    "江苏": "jiangsu",
    "浙江": "zhejiang",
    "安徽": "anhui",
    "福建": "fujian",
    "江西": "jiangxi",
    "山东": "shandong",
    "河南": "henan",
    "湖北": "hubei",
    "湖南": "hunan",
    "广东": "guangdong",
    "海南": "hainan",
    "四川": "sichuan",
    "贵州": "guizhou",
    "云南": "yunnan",
    "陕西": "shanxi1",
    "甘肃": "gansu",
    "青海": "qinghai",
    //5个自治区
    "新疆": "xinjiang",
    "广西": "guangxi",
    "内蒙古": "neimenggu",
    "宁夏": "ningxia",
    "西藏": "xizang",
    //4个直辖市
    "北京": "beijing",
    "天津": "tianjin",
    "上海": "shanghai",
    "重庆": "chongqing",
    //2个特别行政区
    "香港": "xianggang",
    "澳门": "aomen"
};


//初始化echarts实例


//使用制定的配置项和数据显示图表
var china_data = {{ china | safe }}

chart_21 = echarts.init(document.getElementById('sql_21'));
function renderMap(map, data){
    let option = new Object()
	option.backgroundColor = '#FFFFFF'
	option.title = {
        text: '师生分布',
        subtext: map,
        x:'center'
    }
    option.tooltip = {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}人'
    }

    //左侧小导航图标
    option.visualMap = {
        show : true,
        x: 'left',
        y: 'center',
        splitList: [
            {start: 300},
            {start: 200, end: 300},
            {start: 150, end: 200},
            {start: 100, end: 150},
            {start: 50, end: 100},
            {start: 0, end: 50},
        ],
        color: ['#006400', '#008000', '#32CD32','#00FF00', '#98FB98', '#F0FFF0']
    }

    option.series = [
		{
            name: map,
            type: 'map',
            mapType: map,
            roam: false,
            nameMap:{
			    'china':'中国'
			},
            label: {
	            normal:{
					show:true,
					textStyle:{
						color:'#999',
						fontSize:13
					}
	            },
	        },
            data: data
        }
    ];
    //渲染地图
    chart_21.setOption(option)
}

chart_21.on('click', function (params) {
	if( params.name in provinces ) {
        //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
        $.getJSON('/static/Dashboard/map/province/' + provinces[params.name] + '.json', function (data) {
            console.log(data)
            echarts.registerMap(params.name, data);
            var d = [];
            for (var i = 0; i < data.features.length; i++) {
                d.push({
                    name: data.features[i].properties.name,
                    value: 100
                })
            }
            let provinces_data = {{ province | safe }}
            renderMap(params.name, provinces_data[params.name]);
        });
    } else {
		renderMap('中国', china_data);
	}
})
renderMap('中国', china_data)
</script>
</body>
</html>